<sidebar>
    <section class="menu">
    <div class="panel-block">
    <article class="media">
    <figure class="media-left">
        <p class="image is-48x48">
        <img class="is-rounded" src="{ img_profile }">
        </p>
    </figure>
    <div class="media-content">
        <div class="content">
        <p>
            <strong>James Bond</strong> <small>Military Intelligence, Section 6</small>
        </p>
        </div>
        <nav class="level">
        <div class="level-left">
            <a class="level-item">
            <span class="icon is-small"><i class="fa fa-reply"></i></span>
            </a>
            <a class="level-item">
            <span class="icon is-small"><i class="fa fa-retweet"></i></span>
            </a>
            <a class="level-item">
            <span class="icon is-small"><i class="fa fa-heart"></i></span>
            </a>
        </div>
        </nav>
    </div>
    <div class="media-right">
        <a><i class="fa fa-info-circle" aria-hidden="true"></i></a>
    </div>
    </article>
    </div>
    <menu data="{ menus }"></menu>
    <a class="panel-block" onclick="{ logout }">
        <span class="icon is-small"><i class="fa fa-power-off"></i></span><span>Log Off</span>
    </a>
    </section>

    <script>
        import store from '../../../store'
        import '../menu/menu.html'
        
        this.img_profile = require('../../../assets/images/photo.jpg')

        this.menus = [
            {
                title: 'General',
                icon: 'cogs',
                children:[
                    { title: 'Dashboard', icon:'dashboard', href:'#!/setting' }
                ]
            },
            {
                title: 'Administration',
                icon: 'th',
                children:[
                    { title:'Home', icon: 'home', href: '#!/' },
                    {
                        title: 'Elements',
                        icon: 'diamond',
                        children:[
                            {title:'Buttons', href: '#!/buttons'},
                            {title: 'Card', href: '#!/card'},
                            {title: 'Content', href: '#!/content'},
                            {title: 'Form', href: '#!/form'},
                            {title: 'Icons', href: '#!/icons'},
                            {title: 'Image', href: '#!/image'},
                            {title: 'Level', href: '#!/level'},
                            {title: 'MediaObject', href:'#!/mediaobject'},
                            {title: 'Message', href:'#!/message'},
                            {title: 'Nav', href:'#!/nav'},
                            {title: 'Notifications', href: '#!/notifications'},
                            {title: 'Panel', href:'#!/panel'},
                            {title: 'Table', href: '#!/table'},
                            {title: 'Tabs', href:'#!/tabs'},
                            {title: 'Tags', href:'#!/tags'},
                            {title: 'Title', href: '#!/title'}
                        ]
                    },
                    {
                        title: 'Components',
                        icon: 'puzzle-piece',
                        children:[
                            {title:'Ajax', href: '#!/ajax'},
                            {title:'Charts', href: '#!/charts'},
                            {title:'Collapse', href: '#!/collapse'},
                            {title:'Modal', href:'#!/modal'},
                            {title:'Pagination', href:'#!/pagination'},
                            {title:'Progress', href: '#!/progress'},
                            {title:'Rating', href: '#!/rating'},
                            {title: 'Timeline', href: '#!/timeline'},
                            {title: 'Toast', href: '#!/toast'},
                            {title: '404', href: '#!/404'}
                        ]
                    },
                    {
                        title: 'About', icon: 'cube', href: '#!/about'
                    }
                ]
            }
        ]

        this.logout = (e)=>{
            e.preventDefault()
            store.showConfirm('Log Off', 'Are you sure you want to log off?',(result)=>{
                if(result){
                    store.logout()
                }
            })
        }
    </script>

    <style type="text/less">
    section.menu {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        bottom:0;
        background-color:#fafafa;
        box-shadow:1px 0 1px rgba(0,0,0,0.2);
        display:flex;
        flex-direction:column;
        z-index:10;

        .panel-block{
            display:block;
            flex-basis:auto;
            flex-direction:column;
            flex-grow:0;
            flex-shrink:0;
            line-height:20px;
            background-color:#eee;
            border-radius:0;
            box-shadow: 0 -1px 0 rgba(0,0,0,0.12);
            border-bottom:none;
        }

        .panel-block:first-child{
            box-shadow: 0 1px 0 rgba(0,0,0,0.12);
        }
    }

    menu {
        display:flex;
        flex-basis:auto;
        flex-direction:column;
        flex-grow:1;
        flex-shrink:1;
        padding:10px;
        overflow-x:hidden;
        overflow-y:auto;
        margin:0;

        aside.menu{

            .menu-label {
                font-weight:700;

                .icon{
                    vertical-align: bottom;
                    margin-right:6px;
                }
            }

            a {
                position:relative;
                line-height:20px;

                .icon {
                    vertical-align: baseline;
                    margin-right:5px;
                }
            }

            li ul {
                margin: 5px 0 5px 18px;
            }

            .menu-list {
                overflow: hidden;
                transition: all .3s;
            }

            .icon.is-angle {
                position: absolute;
                margin-right:0;
                right: 10px;
                transition: transform .3s ease;
            }

            .menu-toggle .icon.is-angle {
                transform: rotate(180deg);
            }
        }
    }

    .panel-block > .icon{
        vertical-align: middle;
    }
    </style>
</sidebar>